{extend name="index/iframe" /}

{block name="content"}
<div style="margin: 20px 40px;">
    <div id="container" style="min-width: 510px; max-width: 780px; height: 550px; margin: 0 auto"></div>
</div>
{/block}

{block name="css"}
{/block}

{block name="js"}
<!-- jquery -->
<script src="__STATIC__/hcharts/jquery-3.1.1.min.js"></script>
<!-- highcharts主框架 -->
<script src="__STATIC__/hcharts/code/highcharts.js"></script>
<script src="__STATIC__/hcharts/code/highcharts-more.js"></script>
<!-- 导出 -->
<script src="__STATIC__/hcharts/code/modules/exporting.js"></script>
<!-- 数据加载功能模块 -->
<script src="__STATIC__/hcharts/code/modules/funnel.js"></script>
<!-- 中文 -->
<script src="__STATIC__/hcharts/highcharts-zh_CN.js"></script>
<!-- 主题 -->
<!--<script src="__STATIC__/hcharts/code/themes/gray.js"></script>-->
<!--<script src="__STATIC__/hcharts/code/themes/sand-signika.js"></script>-->

<script>
    layui.use(['form'], function(){
        $('#container').highcharts({
            chart: {
                type: 'funnel',
                marginRight: 100
            },
            title: {
                text: '{$Think.get.game_id}：{$Think.get.game_name}（到达率/转化率）（人数）',
                x: -50
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        crop : false,
                        overflow: 'none',
                        format: '<b>{point.name}</b> ({point.y:,.0f})',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                        softConnector: true
                    },
                    neckWidth: '20%',
                    neckHeight: '60%'
                    //-- Other available options
                    // height: pixels or percent
                    // width: pixels or percent
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '用户',
                data: [
                    ['游戏新增（'+(({$Think.get.game_add}/ {$Think.get.game_add})*100).toFixed(2)+'%/'+(({$Think.get.game_add}/ {$Think.get.game_add})*100).toFixed(2)+'%）', {$Think.get.game_add}],
                    ['游戏活跃（'+(({$Think.get.game_active}/ {$Think.get.game_add})*100).toFixed(2)+'%/'+(({$Think.get.game_active}/ {$Think.get.game_add})*100).toFixed(2)+'%）', {$Think.get.game_active}],
                    ['下单人数（'+(({$Think.get.order_number}/ {$Think.get.game_add})*100).toFixed(2)+'%/'+(({$Think.get.order_number}/ {$Think.get.game_active})*100).toFixed(2)+'%）', {$Think.get.order_number}],
                    ['付费人数（'+(({$Think.get.pay_number}/ {$Think.get.game_add})*100).toFixed(2)+'%/'+(({$Think.get.pay_number}/ {$Think.get.order_number})*100).toFixed(2)+'%）', {$Think.get.pay_number}],
                ]
            }]
        });
    });

</script>
{/block}